<template>
  <div class="color-selection-container">
    <svg>
      <circle
        v-for="(color, index) in colors"
        :key="index"
        :cx="(index % 6) * 30 + 20"
        :cy="Math.floor(index / 6) * 30 + 20"
        :r="10"
        :fill="color.value"
        :stroke="getStroke(color)"
        @click="selectColor(color.value)"
      />
    </svg>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'
import { nodeColorSelection } from '@/components/graph-analysis/right-drawer/style-layout-config/style-layout'
import { getDarkColor } from '@/components/graph/graph-util'

@Component({})
export default class ColorSelectionPanel extends Vue {
  @Prop() currentColor: any

  private colors: any = nodeColorSelection.map((color: string) => {
    return {
      value: color,
      stroke: getDarkColor(color, 0.2),
    }
  })

  private getStroke(color: any) {
    if (this.currentColor === color.value) {
      return color.stroke
    }
    return ''
  }

  public selectColor(color: string) {
    this.$emit('selectColor', color)
  }
}
</script>

<style scoped lang="less">
.color-selection-container {
  background: #fff;
  border: 1px solid #d2d2d2;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
  height: 80px;
  width: 192px;

  svg {
    height: 100%;
    width: 100%;
  }
}
</style>
